<template>
    <div class="teamplate-humiture">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="">开始日期：</label>
                        <input type="text" class="form-control start-date" id="j_startDate">
                    </div>
                    <div class="form-group">
                        <label class="">结束日期：</label>
                        <input type="text" class="form-control end-date" id="j_endDate">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" @click="onInquiry">查询</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="b-operation">
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="">监控区域：</label>
                                <select class="form-control" id=j_region>
                                    <option></option>
                                    <option>区域一</option>
                                    <option>区域二</option>
                                    <option>区域三</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="">温度</label>
                                <div class="input-group" style="width:100px;">
                                    <input type="number" class="form-control" v-on:blur="onVerification1" v-model="temperature">
                                    <div class="input-group-addon">℃</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="">湿度</label>
                                <div class="input-group" style="width:100px;">
                                    <input type="number" class="form-control" v-on:blur="onVerification2" v-model="humidity">
                                    <div class="input-group-addon">%</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="">采样人员：</label>
                                <select class="form-control" id="j_attendanceAdd">
                                    <option data-idcard=""></option>
                                    <option v-for="(item,index) in attendance"  :data-idcard="item.idcard">{{item.dzyname}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="">处理措施：</label>
                                <textarea class="form-control" v-model="treatment"></textarea>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-default" @click='onAdd'>保存</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-wrap">
                        <div class="table-box">
                            <table class="table table-striped tc ">
                                <tbody >
                                    <tr>
                                        <th>监控区域</th>
                                        <th>采样时间</th>
                                        <th>温度</th>
                                        <th>湿度</th>
                                        <th>采样人员</th>
                                        <th>处理措施</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(item,index) in mainBody">
                                        <td><input type="text" :id="'area'+index" class="table-input" :value="item.area"></td>
                                        <td><input type="text" :id="'upload_data'+index" class="table-input" :value="item.upload_date | date"></td>
                                        <td><input type="text" :id="'temperature'+index" class="table-input" :value="item.temperature"></td>
                                        <td><input type="text" :id="'humidity'+index" class="table-input" :value="item.humidity"></td>
                                        <td><input type="text" :id="'operator'+index" class="table-input" :value="item.operator_name"></td>
                                        <td><input type="text" :id="'treatment'+index" class="table-input" :value="item.yishj"></td>
                                        <td><input type="button" class="btn btn-default child-btn mr10" :data-index="index" :data-thid="item.th_id" @click="onRevise" value="保存"><input type="button" class="btn btn-default child-btn" @click="onDel" :data-thid="item.th_id" value="删除"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from "../api/eventBus";
    import {
        setUi,
        setpopPerfect
    } from "../vuex/actions";
    import {
        ui,
        popPerfect
    } from "../vuex/getters";
    export default {
        components: {},
        data() {
            return {
                // times: '',
                attendance: {}, //考勤药师
                temperature: '10', //温度
                humidity: '10', //湿度
                treatment: '', //处理措施
                storeId: '', //门店信息
                mainBody: {}, //考勤药师记录列表
            };
        },
        watch: {},
        vuex: {
            getters: {
                ui,
                popPerfect
            },
            actions: {
                setUi,
                setpopPerfect
            }
        },
        filters: {
            date: function(info) {
                function timetrans(date) {
                    var date = new Date(date); //如果date不为10位需要乘1000
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                    return Y + M + D + h + m + s;
                }
                return timetrans(info);
            }
        },
        methods: {
            onVerification1(e) { //温度整数验证
                let me = this;
                console.log(me.util.string.integer(me.temperature), me.temperature);
                if (!me.util.string.integer(me.temperature)) {
                    layer.msg("您输入的格式不正确!");
                }
            },
            onVerification2(e) { //湿度整数验证
                let me = this;
                console.log(me.util.string.integer(me.temperature), me.temperature);
                if (!me.util.string.integer(me.humidity)) {
                    layer.msg("您输入的格式不正确!");
                }
            },
            onInquiry(e) { //查询列表
                let me = this;
                let res = {
                    beginDate: $('#j_startDate').val(),
                    endDate: $('#j_endDate').val(),
                    fdbs: localStorage.getItem('fdbs')
                }
                me.service.selectHumitureRecordList(me, res, data => {
                    me.mainBody = data.data;
                })
            },
            onRevise(e) { //修改列表 
                let me = this;
                let {
                    thid,
                    index
                } = e.target.dataset
                let res = {
                    thId: thid,
                    temperature: $('#temperature' + index).val(),
                    humidity: $('#humidity' + index).val(),
                    treatment: $('#treatment' + index).val(),
                    newoperatortime: $('#upload_data' + index).val(),
                }
                me.service.updateHumitureRecord(me, res, data => {
                    layer.alert(data.message);
                })
            },
            onDel(e) { //删除列表
                let me = this;
                let {
                    thid
                } = e.target.dataset
                let res = {
                    thId: thid
                }
                let idx;
                me.service.deleteHumitureRecord(me, res, data => {
                    layer.alert(data.message);
                    me.mainBody.forEach((item, index) => {
                        if (item.th_id == thid) {
                            idx = index;
                        }
                    });
                    Vue.delete(me.mainBody, idx);
                })
            },
            onAdd(e) { //添加
                let me = this;
                let res = {
                    storeId: me.storeId,
                    area: $('#j_region option:selected').text(),
                    temperature: me.temperature,
                    humidity: me.humidity,
                    operatorName: $('#j_attendanceAdd option:selected').text(),
                    treatment: me.treatment,
                    fdbs: localStorage.getItem('fdbs')
                }
                me.service.addHumitureRecord(me, res, data => {
                    let res = {
                        beginDate: $('#j_startDate').val(),
                        endDate: $('#j_endDate').val(),
                        fdbs: localStorage.getItem('fdbs')
                    }
                    me.service.selectHumitureRecordList(me, res, data => {
                        me.mainBody = data.data;
                    })
                })
            }
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            $(".start-date,.end-date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });
            let time = new Date();
            let startTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + '01'; //默认开始日期
            let endTimes = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + me.util.string.numFix(time.getDate()); //默认结束日期
            $('#j_startDate').val(startTimes);
            $('#j_endDate').val(endTimes);
            me.service.selectKQYaoShiList(me, data => {
                me.attendance = data.data;
            });
            me.service.selectKQShopList(me, data => {
                me.storeId = data.data.store_id
            })
            me.onInquiry();
            drugH();
            $(window).resize(function() {
                drugH();
            });
        }
    };
</script>